<template>
	<view class="box">
		<view class="video">
		    <text>视频简介：</text>
		    <view>
		        <input type="text" v-model="videoInfo.title" placeholder="请填写简介">
		    </view>
		</view>
		<view class="video">
		    <text>视频摘要：</text>
		    <view>
		        <input type="text" v-model="videoInfo.des" placeholder="请填写摘要">
		    </view>
		</view>
		<view class="videoTop">
			<text>视频是否置顶：</text>
			<view>
				<switch style="transform:scale(0.7);color:#007aff;" @change="videoTopOpen"/>
			</view>
		</view>
		<view class="pushVideo">
			<text>上传视频封面：</text>
			<view>
				<view v-if="videoInfo.image_src">
					<image :src="videoInfo.image_src"></image>
				</view>
				<view class="border" @click="addVideoImg" v-else>
				     <view>
				          <text>+</text>
				          <text>封面</text>
				     </view>
				</view>
			</view>
		</view>
		<view class="pushVideo">
			<text>上传视频：</text>
			<view>
				<view v-if="videoInfo.video_src">
					<video :src="videoInfo.video_src"></video>
				</view>
				<view class="border" @click="addVideo" v-else>
				     <view>
				          <text>+</text>
				          <text>视频</text>
				     </view>
				</view>
			</view>
		</view>
		<view class="endUp" @click="endUp">
			<button>确认上传</button>
		</view>
	</view>
</template>

<script>
	import {
	     HTTP_REQUEST_URL
	} from '@/config/app.js';
	import {
		holdQiyeVideo,
	} from "@/api/userminp.js"
	export default {
		data() {
			return {
				imgHost: HTTP_REQUEST_URL + '/mingpian',
				// 企业id
				qiyeId:null,
				// 上传视频信息
				videoInfo:{
					// 视频简介
					title:"",
					// 视频链接
					video_src:"",
					// 是否置顶
					hot:0,
					// 视频描述
					des:"",
					// 视频封面
					image_src:""
				}
			}
		},
		onLoad(e){
			if(e.id){
				this.qiyeId=e.id
			}
		},
		methods: {
			// 视频置顶开关
			videoTopOpen(e){
				if(e.detail.value){
					this.videoInfo.hot=1
				}else{
					this.videoInfo.hot=0
				}
			},
			// 上传视频
			async addVideo(){
				uni.chooseMedia({
					mediaType:["video"],
					success:(res)=>{
						console.log(res.tempFiles[0].tempFilePath)
						uni.uploadFile({
							url: HTTP_REQUEST_URL + '/api/upload/video', //仅为示例，非真实的接口地址
							filePath: res.tempFiles[0].tempFilePath,
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data)
								if(res.status == 200){
									this.videoInfo.video_src=res.data.url || res.data.src;
								}else{
									uni.showToast({
										title: '上传视频失败',
										icon: 'error',
										duration: 1000
									})
								}
								console.log(res);
							}
						});
					}
				})
			},
			// 上传视频封面
			addVideoImg(){
				console.log('asdfsdf');
				let that = this;
				that.$util.uploadImageChange('upload/image', (res) => {
					if(res.status==200){
						that.videoInfo.image_src=res.data.url
					}
				});
			},
			// 提交上传
			endUp(){
				holdQiyeVideo({
					enterprise_id:this.qiyeId,
					title:this.videoInfo.title,
					video_src:this.videoInfo.video_src,
					hot:this.videoInfo.hot,
					des:this.videoInfo.des,
					image_src:this.videoInfo.image_src,
					status:1
				}).then(res=>{
					if(res.status==200){
						uni.showToast({
							title:"上传视频成功"
						})
						setTimeout(()=>{
							uni.navigateBack()
						},2000)
					}
					console.log(res)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: white;
	}
	.box{
		background-color: white;
		&>view{
			border-bottom: 2rpx solid #eee;
			padding: 32rpx 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text{
				text-align: center;
			}
			&>view{
				width: 70%;
			}
		}
		.pushVideo{
			.border {
			     margin: 20rpx 15rpx;
			     vertical-align: middle;
			     border: 2rpx dashed #595959;
			     display: inline-block;
			     margin-right: 10rpx;
			     width: 180rpx;
			     height: 180rpx;
			     position: relative;
				&>view{
					display: flex;
					flex-wrap: wrap;
					text{
						width: 100%;
					}
					text:nth-of-type(1){
						font-size: 100rpx;
					}
				}
			}
			video{
				width: 53%;
				height: 150rpx;
			}
			image{
				width: 50%;
				height: 200rpx;
			}
		}
		.endUp{
			display: flex;
			justify-content: center;
			button{
				background-color:#e33c21;
				color: white;
				width:50%;
				text-align:center;
				font-size: 28rpx;
				padding: 15rpx 20rpx;
			}
		}
	}
</style>
